import { Component } from 'react';
import './Columnchart.less';
import ReactHighcharts from 'react-highcharts';


export default class Columnchart extends Component {

  constructor(props) {
    super(props);

  }

  config() {
    const { data } = this.props;
    return {
      chart: {
        type: 'column'
      },
      title: {
        text: '',
      },
      xAxis: {
        categories: data.xAxis,
      },
      yAxis: {
        min: 0,
        title: {
          text: data.xText,
          align: 'high',
          rotation: 0,
          x: 30,
          y: -15
        },
        // labels: {
        //   overflow: 'justify'
        // },
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}' + data.unit + '</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        column: {
          dataLabels: {
            enabled: true
          }
        },
      },
      legend: {
        verticalAlign: 'top',
        padding: 30,
        symbolRadius: 0
      },
      series: data.yAxis
    }
  }

  render() {
    return (
      <div className="mod-columnchart">
        <ReactHighcharts ref="chart" neverReflow={true} config={this.config()} />
      </div>
    );
  }
}
